<template>
  <q-dialog ref="dialogRef" @hide="onDialogHide">
    <q-card class="fy-dialog" :style="{ width: width }">
      <q-card-section class="flex items-center justify-between">
        <div class="text-h6">{{ title }}</div>
        <q-btn v-if="showClose" flat round dense icon="close" v-close-popup />
      </q-card-section>

      <q-card-section class="q-pt-none">
        <slot></slot>
      </q-card-section>

      <q-card-actions align="right" v-if="showFooter">
        <q-btn :label="cancelText" color="grey-6" v-close-popup />
        <q-btn :label="confirmText" color="primary" @click="onOKClick" />
      </q-card-actions>
    </q-card>
  </q-dialog>
</template>

<script setup>
defineOptions({
  name: 'FyBaseDialog',
})

import { useDialogPluginComponent } from 'quasar'

defineProps({
  title: {
    type: String,
    default: '提示',
  },
  width: {
    type: String,
    default: '500px',
  },
  showClose: {
    type: Boolean,
    default: true,
  },
  showFooter: {
    type: Boolean,
    default: true,
  },
  confirmText: {
    type: String,
    default: '确定',
  },
  cancelText: {
    type: String,
    default: '取消',
  },
})

const { dialogRef, onDialogHide, onDialogOK } = useDialogPluginComponent()

const onOKClick = () => {
  onDialogOK()
}
</script>

<style lang="scss">
.fy-dialog {
  min-width: 380px;
}
</style>
